<template>
	<view class="">
		<view v-if="type==1&&tournamentStatus<2" @click="toAddPk" class="bgc-green">添加PK</view>
		<view v-if="showTabs == 1" class="">
			<view class="tabList"><text v-for="(item, index) in tabsList" :class="[tabIndex == index ? 'showgreen' : '']" @click="changeTab(index,item.golfTournamentPkId)" :key="index"></text></view>
			<view @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend" class="content">
				<view class="oneLeft">
					<view  @click="deletePk" v-if="type==1&&tournamentStatus<2" class="one">
						<image src="../../static/image/del.png" mode=""></image>
						<text >删除</text>
					</view>
					<view class="two">总杆</view>
					<view class="three">总差</view>
				</view>
				<view v-for="(item, index) in groupList" :key="index" :style="{ width: (item.golfTournamentGalleryList.length / nums ) * 100 + '%' }" class="twoLeft">
					<view  class="hedaLine">
						<view v-for="(items,index) in item.golfTournamentGalleryList" :key="index" class="">
							<image :src="items.avatar?items.avatar:'../../static/image/mine_1.png'" mode=""></image>
							<text>{{items.nickname}}</text>
						</view>
					</view>
					<view class="nums">{{item.totHit}}</view>
					<view class="nums">{{item.totHandicap}}</view>
				</view>
			</view>
			<view class="golf-title flex align-center flex-between">
				点赞列表
				<text class="golf-adjust align-center" v-if="tournamentStatus<2" @click="toLike">参与点赞</text>
			</view>
			<goodsList :likeList="likeList"></goodsList>
		</view>
		<view v-if="showTabs == 2" class="">
			<view class="attention">
				<text>当前球局没有配置PK</text>
				<text>当前球局没有配置PK 本功能仅供球员进行比赛游戏,严禁赌博</text>
			</view>
		</view>
		<!-- 			<view class="footButton">
			<view class="golf-btn">
				<button  @click="bindSaveChangesBtn" :disabled="disabledBtn">开球</button>
			</view>
				<view class="today">
					<image src="../../static/image/green.png" mode=""></image>
					<text>今日果岭</text>
				</view>
				
			</view> -->
	</view>
</template>

<script>
import goodsList from '@/components/goodsList/goodsList.vue';
export default {
	data() {
		return {
			tabIndex: 0,
			tabsList: [],
			showTabs: 1,
			pkId: '',
			groupList: [],
			likeList:[],
			 flag: 0,
			        text: '',
			        lastX: 0,
			        lastY: 0
		};
	},
	components: {
		goodsList
	},
	computed: {
		nums: function() {
				let num=0
				this.groupList.map(res=>{
					num=res.golfTournamentGalleryList.length+num
				})
				console.log(num)
				return num
		}
	},
	props: {
		golfTournamentId: {
			type: Number,
			default: 0
		},
		type:{
			type:Number,
			default: 0
		},
		tournamentStatus:{
			type:Number,
			default: 0
		}
	},
	created() {
		// this.getPkList();
		console.log('1212');
	},
	watch: {
		pkId() {
			if(this.pkId){
			this.getPkInfo();
			}
			this.getLikeList()
		}
	},
	methods: {
		deletePk(){
			uni.showModal({
			    title: '提示',
			    content: '确认删除这场PK？',
			    success:  (res)=> {
			        if (res.confirm) {
						this.$api.score.deletePk({
							data:{
								pkId:this.pkId
							}
						}).then(info=>{
							if(info.data.code==0){
								this.getPkList()
							}
						})
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		        handletouchmove: function(event) {
		            // console.log(event)
		            if (this.flag !== 0) {
		                return;
		            }
		            let currentX = event.touches[0].pageX;
		            let currentY = event.touches[0].pageY;
		            let tx = currentX - this.lastX;
		            let ty = currentY - this.lastY;
		            let text = '';
		            this.mindex = -1;
		            //左右方向滑动
		            if (Math.abs(tx) > Math.abs(ty)) {
		                if (tx < 0) {
		                    text = '向左滑动';
		                    this.flag = 1;
							console.log("zuohua")
							if(this.tabIndex<this.tabsList.length-1){
								
							this.tabIndex=this.tabIndex+1
							this.pkId=this.tabsList[this.tabIndex].golfTournamentPkId
							}
		                //  this.getList();  //调用列表的方法
		                } else if (tx > 0) {
		                    text = '向右滑动';
		                    this.flag = 2;
							if(this.tabIndex>0){
								
							this.tabIndex=this.tabIndex-1
							this.pkId=this.tabsList[this.tabIndex].golfTournamentPkId
							}
							console.log("youhua")

		                }
		            }
		            //上下方向滑动
		            else {
		                if (ty < 0) {
		                    text = '向上滑动';
		                    this.flag = 3;
		                //  this.getList();  //调用列表的方法
		                } else if (ty > 0) {
		                    text = '向下滑动';
		                    this.flag = 4;
		                }
		            }
		 
		            //将当前坐标进行保存以进行下一次计算
		            this.lastX = currentX;
		            this.lastY = currentY;
		            this.text = text;
		        },
		        handletouchstart: function(event) {
		            // console.log(event)
		            this.lastX = event.touches[0].pageX;
		            this.lastY = event.touches[0].pageY;
		        },
		        handletouchend: function(event) {
		            this.flag = 0;
		            this.text = '没有滑动';
		        },

		changeTab(index,id) {
			this.tabIndex = index;
			this.pkId=id
		},
		toAddPk() {
			uni.navigateTo({
				url: '/pages/addPk/addGolfPk?id=' + this.golfTournamentId
			});
		},
		toLike(){
			uni.navigateTo({
				url: '/pages/addPk/addLike?id=' + this.pkId
			});
		},
		getLikeList(){
			if(this.pkId){
			this.$api.score
				.getLikeList({
					data: {
						pkId: this.pkId
					}
				})
				.then(res => {
					console.log(res);
					this.likeList=res.data.data
				});
			}
		},
		getPkInfo() {
			if(this.pkId){
			console.log(this.pkId);
			if(this.pkId){
			this.$api.score
				.getPkInfo({
					data: {
						pkId: this.pkId
					}
				})
				.then(res => {
					console.log(res);
					this.groupList = res.data.data.groupList;
					// this.likeList=res.data.data.groupList;
				});
			}
			}
		},
		getPkList() {
			this.$api.score
				.getPkList({
					data: {
						golfTournamentId: this.golfTournamentId
					}
				})
				.then(res => {
					console.log(res);
					this.showTabs = res.data.data.total == 0 ? 2 : 1;
					this.tabsList = res.data.data.records;
					if (res.data.data.total!=0) {
						this.pkId = res.data.data.records[0].golfTournamentPkId;
					}
				});
		}
	}
};
</script>

<style scoped lang="scss">
.golf-adjust {
	width: 108rpx;
	height: 44rpx;
	background: rgba(0, 193, 92, 1);
	border-radius: 4px;
	text-align: center;
	line-height: 44rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	line-height: 44rpx;
}
.golf-title {
	height: 40rpx;
	margin: 30rpx 0;
	margin-right: 24rpx;
}
.totals {
	display: flex;
	width: 100%;
	font-size: 36rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: rgba(51, 51, 51, 1);
	height: 100%;
	align-items: center;
	.onePiece {
		flex: 1;
		height: 100%;
		align-items: center;
		justify-content: center;
	}
	// .threePiece{
	// 	flex: 1;
	// 	align-items: center;
	// 	height: 100%;
	// 	background:rgba(244,244,244,1);
	// 	justify-content: center;
	// }
}
.content {
	width: 702rpx;
	height: 368rpx;
	background: rgba(255, 255, 255, 1);
	margin: auto;
	display: flex;
	.oneLeft {
		height: 100%;
		border-left: 1rpx solid rgba(238, 238, 238, 1);
		border-right: 1rpx solid rgba(238, 238, 238, 1);
		width: 96rpx;
		.one {
			height: 172rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-bottom: 1rpx solid rgba(238, 238, 238, 1);
			image {
				width: 32rpx;
				height: 32rpx;
				margin-bottom: 6rpx;
			}
			text {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}
		}
		.two,
		.three {
			width: 100%;
			height: 97rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			border-bottom: 1rpx solid rgba(238, 238, 238, 1);
		}
	}
	.twoLeft {
		height: 100%;
		border-right: 1rpx solid rgba(238, 238, 238, 1);
		display: flex;
		flex-direction: column;
		image {
			width: 84rpx;
			height: 84rpx;
			margin-bottom: 12rpx;
		}
		.hedaLine {
			display: flex;
			height: 172rpx;
			view {
				display: flex;
				width: 100%;
				height: 100%;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}
		.nums {
			display: flex;
			width: 100%;
			height: 97rpx;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: rgba(51, 51, 51, 1);
		}
	}
}
.tabList {
	width: 50%;
	height: 62rpx;
	display: flex;
	justify-content: space-between;
	margin: auto;
	align-items: center;
	text {
		display: block;
		width: 60rpx;
		height: 6rpx;
		background: rgba(238, 238, 238, 1);
		border-radius: 3rpx;
	}
}
.showgreen {
	width: 60rpx;
	height: 6rpx;
	background: rgba(0, 193, 92, 1) !important;
	border-radius: 3rpx;
}
.attention {
	display: flex;
	flex-direction: column;
	height: 670rpx;
	width: 100%;
	font-size: 24rpx;
	align-items: center;
	justify-content: center;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(153, 153, 153, 1);
	line-height: 33rpx;
}
.footButton {
	display: flex;
	.today {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		text {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
		image {
			width: 44rpx;
			height: 44rpx;
			margin-bottom: 8rpx;
		}
	}
}
.bgc-green {
	width: 686rpx;
	height: 76rpx;
	background: rgba(0, 193, 92, 1);
	border-radius: 4rpx;
	margin: auto;
	line-height: 76rpx;
	text-align: center;
	font-size: 36rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	margin-top: 24rpx;
}
.golf-text {
	display: block;
	width: 100%;
	height: 33rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(153, 153, 153, 1);
	line-height: 33rpx;
	text-align: center;
}
.golf-btn {
	width: 564rpx;
	height: 98rpx;
	// bottom: 24rpx;
	// position: absolute;
	// left: 24rpx;
	// background:rgba(13,213,97,1);
	border-radius: 6px;

	/* 		display: flex;
			flex-direction: column;
			align-items: center; */
	button {
		background: rgba(13, 213, 97, 1);
	}
}

.golf-btn button {
	border-radius: 6rpx;
	font-size: 36rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
}
</style>
